<template>
  <div v-loading="loading">
    <el-row :gutter="10">
      <!-- 左上角：基本信息 -->
      <el-col :span="24" class="detail-info-item">
        <UserBasicInfo :user="user">
          <template #header>
            <div class="card-header">
              <!-- 标题与标签在同一行 -->
              <div class="header-content">
                <div class="title-with-tags">
                  <CardTitle title="基本信息" />
                  <!-- 标签展示区域 -->
                  <div v-if="user.tagNames && user.tagNames.length" class="tags-container">
                    <el-tag
                      v-for="(tag, index) in user.tagNames"
                      :key="index"
                      size="small"
                      effect="light"
                      class="tag-item"
                    >
                      {{ tag }}
                    </el-tag>
                  </div>
                </div>
              </div>
              <el-button size="small" text type="primary" @click="openForm('update')">
                编辑
              </el-button>
            </div>
          </template>
        </UserBasicInfo>
      </el-col>
      <!-- 下边：账户明细 -->
      <el-card header="详情信息" shadow="never" style="width: 100%; margin-top: 10px">
        <template #header>
          <CardTitle title="详情信息" />
        </template>
        <el-tabs>
          <el-tab-pane label="预警消息" lazy>
            <PersonWarnComponent :person-id="id" />
          </el-tab-pane>
          <el-tab-pane v-if="user.foreigner === 1" label="事件记录" lazy>
            <ForeignerEvent :edit-person-id="id" />
          </el-tab-pane>
          <el-tab-pane label="行为轨迹" lazy>
            <LocationComponent :person-id="id" />
          </el-tab-pane>
          <el-tab-pane label="出行分析">
            <Transportation :person-id="id" />
          </el-tab-pane>
          <el-tab-pane label="住宿分析">
            <HotelRecord :person-id="id" />
          </el-tab-pane>
          <el-tab-pane label="账号分析" lazy>
            <AccountManagement :edit-person-id="id" />
          </el-tab-pane>
          <el-tab-pane label="关系人信息" lazy>
            <RelationPersonManagement :edit-person-id="id" />
          </el-tab-pane>
          <el-tab-pane label="关系分析" lazy>
            <RelationshipGraph :person-id="id" />
          </el-tab-pane>
          <el-tab-pane label="社交分析" lazy>
            <InternetArticle :user-id="id" />
          </el-tab-pane>
          <el-tab-pane label="多媒体文件" lazy>
            <FileManage :person-id="id" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-row>
  </div>

  <!-- 表单弹窗：添加/修改 -->
  <UserForm ref="formRef" @success="getUserData(id as string)" />
</template>
<script lang="ts" setup>
import * as UserApi from '@/api/member/user'
import { useTagsViewStore } from '@/store/modules/tagsView'
import UserForm from '@/views/member/user/UserForm.vue'
import UserBasicInfo from './UserBasicInfo.vue'
import ForeignerEvent from './ForeignerEvent.vue'
import HotelRecord from './HotelRecord.vue'
import Transportation from './Transportation.vue'
import InternetArticle from './InternetArticle.vue'
import RelationshipGraph from './RelationshipGraph.vue'
import AccountManagement from './AccountManagement.vue'
import PersonWarnComponent from './PersonWarnComponent.vue'
import LocationComponent from '@/views/member/location/index.vue'
import { CardTitle } from '@/components/Card/index'
import { ElMessage } from 'element-plus'
import FileManage from "./FileManage.vue";
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import RelationPersonManagement from "@/views/member/user/detail/RelationPersonManagement.vue";

defineOptions({ name: 'MemberDetail' })

const loading = ref(true) // 加载中
const user = ref<UserApi.UserVO>({} as UserApi.UserVO)

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string) => {
  formRef.value.open(type, id)
}

/** 获得用户 */
const getUserData = async (id: string) => {
  loading.value = true
  try {
    user.value = await UserApi.getUser(Number(id))
  } finally {
    loading.value = false
  }
}

/** 初始化 */
const { currentRoute } = useRouter() // 路由
const { delView } = useTagsViewStore() // 视图操作
const route = useRoute()
const id = route.params.id as string
onMounted(() => {
  if (!id) {
    ElMessage.warning('参数错误，会员编号不能为空！')
    delView(unref(currentRoute))
    return
  }
  getUserData(id as string)
})
</script>
<style lang="css" scoped>
.detail-info-item:first-child {
  padding-left: 0 !important;
}

.detail-info-item:nth-child(2) {
  padding-right: 0 !important;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 10px;
}

.header-content {
  flex: 1; /* 占满剩余空间，让标签有足够展示空间 */
}

/* 标题与标签在同一行 */
.title-with-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 标签过多时自动换行，但标题仍保持在第一行 */
  gap: 12px; /* 标题与标签之间的间距 */
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0; /* 移除多余边距 */
}

.tag-item {
  background-color: #f0f9ff;
  color: #165dff;
  white-space: nowrap; /* 标签文字不换行 */
}

:deep(.card-header){
  padding-bottom: 0;
}
</style>

